<template>
  <div class="wang-editor-container">
    <slot name="toolbar-actions"></slot>
    <div :style="containerStyle">
      <Toolbar
          :editor="editorRef"
          :defaultConfig="mergedToolbarConfig"
          :mode="mode"
          :style="toolbarStyle"
      />
      <Editor
          :defaultConfig="mergedEditorConfig"
          :mode="mode"
          v-model="valueHtml"
          :style="editorStyle"
          @onCreated="handleCreated"
          @onChange="handleChange"
          @onDestroyed="handleDestroyed"
          @onFocus="handleFocus"
          @onBlur="handleBlur"
          @customAlert="handleCustomAlert"
          @customPaste="handleCustomPaste"
      />
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script setup>import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef, computed } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

// 定义 props
const props = defineProps({
  modelValue: {
    type: String,
    default: '<p>请输入内容...</p>'
  },
  mode: {
    type: String,
    default: 'default',
    validator: (value) => ['default', 'simple'].includes(value)
  },
  height: {
    type: Number,
    default: 100
  },
  toolbarConfig: {
    type: Object,
    default: () => ({})
  },
  editorConfig: {
    type: Object,
    default: () => ({})
  },
  containerStyle: {
    type: Object,
    default: () => ({
      border: '1px solid #ccc',
      marginTop: '10px'
    })
  },
  toolbarStyle: {
    type: Object,
    default: () => ({
      borderBottom: '1px solid #ccc'
    })
  }
});

// 定义 emits
const emit = defineEmits([
  'update:modelValue',
  'created',
  'change',
  'destroyed',
  'focus',
  'blur',
  'customAlert',
  'customPaste'
]);

// 编辑器实例
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref(props.modelValue);

// 合并配置
const mergedToolbarConfig = computed(() => ({
  ...props.toolbarConfig
}));

const mergedEditorConfig = computed(() => ({
  placeholder: '请输入内容...',
  ...props.editorConfig
}));

// 编辑器样式
const editorStyle = computed(() => ({
  height: `${props.height}px`,
  overflowY: 'hidden'
}));

// 组件销毁时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor) {
    editor.destroy();
  }
});

// 编辑器回调
const handleCreated = (editor) => {
  editorRef.value = editor;
  emit('created', editor);
};

const handleChange = (editor) => {
  const html = editor.getHtml();
  valueHtml.value = html;
  emit('update:modelValue', html);
  emit('change', editor);
};

const handleDestroyed = (editor) => {
  emit('destroyed', editor);
};

const handleFocus = (editor) => {
  emit('focus', editor);
};

const handleBlur = (editor) => {
  emit('blur', editor);
};

const handleCustomAlert = (info, type) => {
  emit('customAlert', info, type);
};

const handleCustomPaste = (editor, event, callback) => {
  emit('customPaste', editor, event, callback);
};

// 暴露方法给父组件
defineExpose({
  // 插入文本
  insertText(text) {
    const editor = editorRef.value;
    if (editor) {
      editor.insertText(text);
    }
  },
  // 获取HTML内容
  getHtml() {
    const editor = editorRef.value;
    return editor ? editor.getHtml() : '';
  },
  // 获取纯文本
  getText() {
    const editor = editorRef.value;
    return editor ? editor.getText() : '';
  },
  // 禁用编辑器
  disable() {
    const editor = editorRef.value;
    if (editor) {
      editor.disable();
    }
  },
  // 启用编辑器
  enable() {
    const editor = editorRef.value;
    if (editor) {
      editor.enable();
    }
  },
  // 清空内容
  clear() {
    const editor = editorRef.value;
    if (editor) {
      editor.clear();
    }
  },
  // 获取编辑器实例
  getEditorInstance() {
    return editorRef.value;
  }
});
</script>

<style scoped>.wang-editor-container {
  width: 100%;
  box-sizing: border-box;
}

.w-e-toolbar {
  z-index: 2!important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}
</style>

